<template>
  <el-card style="height: 100%" v-loading="isAjaxing">
    <div style="margin-bottom: 20px">
      <el-button size="small" type="primary" @click="getLogs"><i class="el-icon-refresh-right"></i></el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="管理员名称" prop="member_name"></el-table-column>
      <el-table-column label="行为" prop="method"></el-table-column>
      <el-table-column label="地址" prop="function"></el-table-column>
      <el-table-column label="IP" prop="ip"></el-table-column>
      <el-table-column label="系统" prop="equip"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="filter.page"
      :page-sizes="[10, 50, 100, 150]"
      :page-size="filter.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
import { getAdminLogs } from '../../../axios/adminRequest'
import { getCurrentInstance, reactive, toRefs } from 'vue'

export default {
  name: 'adminLogs',
  setup(){
    const state = reactive({
      isAjaxing:true,
      tableData:[],
      filter:{
        page:1,
        limit:10
      },
      total:0
    })
    let { proxy } = getCurrentInstance()

    const getLogs = ()=>{
      state.isAjaxing = true
      getAdminLogs(state.filter).then(res=>{
        if(res.code == 0){
          state.tableData = res.data.data
          state.total = res.data.total
        }else{
          proxy.$message.error(res.msg)
        }
        state.isAjaxing = false
      })
    }
    getLogs()

    const handleSizeChange = (pageSize)=>{
      state.filter.page = 1
      state.filter.limit = pageSize
      getLogs()
    }

    const handleCurrentChange = (page)=>{
      state.filter.page = page
      getLogs()
    }

    return {
      ...toRefs(state),
      handleSizeChange,
      handleCurrentChange,
      getLogs
    }
  }
}
</script>

<style lang="less" scoped>
.el-table{
  &:deep(.el-table__row){
    .cell{
      font-size: 12px;
    }
  }
}
</style>
